<template>
  <div>
    <div id="container" style="width:100%;height:450px;" />
  </div>
</template>

<script>
import { TMap } from './index'
export default {
  props: {
    lat: {
      type: Number,
      default: 34.34127
    },
    lon: {
      type: Number,
      default: 108.93984
    },
    mapKey: {
      tyep: String
    },
    address: {
      tyep: String
    }
  },
  data() {
    return {
      geocoder: undefined,
      marker: null,
      resultDatail: {}
    }
  },
  created() {
    // this.initMap();
    this.getDefaultAddress()
  },
  methods: {
    // 初始化地图
    initMap() {
      const that = this
      // that.address="郑州市";
      that.getLocation(that.address)
    },
    getDefaultAddress() {
      // https://apis.map.qq.com/ws/location/v1/ip?ip=&key=UORBZ-26SKJ-MI4FE-DA7ZY-LWF62-CMB7L
      const that = this
      that.$jsonp('https://apis.map.qq.com/ws/location/v1/ip?', {
        key: that.mapKey,
        output: 'jsonp'
      }).then((res) => {
        if (res.status === 0) {
          that.address = res.result.ad_info.city
          that.initMap()
        } else {
          that.address = '北京市'
          that.initMap()
          // that.$message.error(res.message)
        }
      }).catch(err => {
        that.address = '北京市'
        that.initMap()
        // that.$message.error(err.message)
      })
    },
    // initMap() {
    //   TMap(this.mapKey).then(qq => {
    //     var map;
    //     var center = new qq.maps.LatLng(this.lat, this.lon);
    //     map = new qq.maps.Map(document.getElementById("container"), {
    //       // center: center,
    //       zoom: 15
    //     });
    //     //调用地址解析类
    //     this.geocoder = new qq.maps.Geocoder({
    //       complete: result => {
    //         map.setCenter(result.detail.location);
    //         this.marker = new qq.maps.Marker({
    //           map,
    //           position: result.detail.location
    //         });
    //         this.resultDatail = result.detail;
    //         this.$emit("getCoordinates", result.detail);
    //       },
    //       error: err => {
    //        this.$message.error('请重新输入地址，地址中请包括省市区信息')
    //       },
    //     });
    //     console.log(this.address);
    //     this.geocoder.getAddress(center);

    //     // this.geocoder.getLocation(this.address);
    //     // 开启监听点击
    //     qq.maps.event.addListener(map, "click", event => {
    //       this.marker.setMap(null);
    //       this.marker.position = {
    //         lat: event.latLng.getLat(),
    //         lng: event.latLng.getLng()
    //       };
    //       var coord = new qq.maps.LatLng(
    //         event.latLng.getLat(),
    //         event.latLng.getLng()
    //       );
    //       this.geocoder.getAddress(coord);
    //     });
    //   });
    // },
    getLocation(address) {
      const that = this
      that.$jsonp('https://apis.map.qq.com/ws/geocoder/v1?', {
        address: `${address}`,
        key: that.mapKey,
        output: 'jsonp'
      }).then((res) => {
        if (res.status === 0) {
          TMap(that.mapKey).then(qq => {
            var center = new qq.maps.LatLng(res.result.location.lat, res.result.location.lng)
            const map = new qq.maps.Map(document.getElementById('container'), {
              center: center,
              zoom: 15
            })
          })
        } else {
          that.$message.error(res.message)
        }
      }).catch(err => {
        that.$message.error(err.message)
      })
    },
    // 搜索地点
    searchKeyword(address = '西宁') {
      // this.marker.setMap(null);
      // this.geocoder.getLocation(address);
      this.getLocation(address)
    }
  }
}
</script>

<style scoped>
</style>
